<template>
  <div style="border:1px solid #d3d3d3;background:white;margin-top:5px;margin-left:5px">
    <el-row style="background:#f7f7f7;border-bottom:1px solid #d3d3d3;">
      <div>
        <el-col :span="24">
          <el-tabs style="height:40px;margin-left:20px" @tab-click="tabclik" value="approvaltime">
            <el-tab-pane label="最新创建项目" name="approvaltime"></el-tab-pane>
            <el-tab-pane label="近期完成项目" name="actualendtime"></el-tab-pane>
          </el-tabs>
        </el-col>
        <!-- <el-col :span="7" :offset="2">
          <el-select placeholder="请选择" v-model="projectOrMilepost">
            <el-option v-for=" item in selections" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </el-col> -->
        <!-- <el-col :span="4" :offset="1">
          <el-button type="primary" size="small" style="margin-top:3px">导出</el-button>
        </el-col> -->
      </div>
    </el-row>
    <!-- <el-row>
      <div style="height:1rem"></div>
    </el-row> -->
    <el-row>
      <el-table class="tl-table" ref="mainTable" height=260 :resizable-refs="['search', 'toolbar', 'selector', 'pager']" :data="datas" row-key="id" border fit>
        <!-- <el-table-column type="selection" min-width="25%"></el-table-column> -->
        <el-table-column prop="name" label="项目名称" min-width="25%" :show-overflow-tooltip=true sortable="project" sort-by="project" align="left"></el-table-column>
        <!-- <el-table-column prop="dispcategory" label="类型" min-width="25%" :show-overflow-tooltip=true sortable="custom" sort-by="docdate" align="center"></el-table-column> -->
        <el-table-column prop="projectmanagername" label="项目经理" min-width="25%" :show-overflow-tooltip=true sortable="custom" sort-by="usercode" align="center"></el-table-column>
        <el-table-column prop="approvaltime" label="立项时间" min-width="25%" sortable="custom" :show-overflow-tooltip=true sort-by="username" align="center"></el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagebar" ref="pager">
      <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mixin_list } from '@tapui/mixins/mixin_list'
import { getAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'

// 异常情况概览
export default {
  name: 'recentlyCreateAndComplete',
  mixins: [mixin_list],
  // mixins: [mixin_list],
  data() {
    return {
      selections: [
        {
          value: 'project',
          label: '项目'
        },
        {
          value: 'milepost',
          label: '里程碑'
        }
      ],
      timeColName: 'approvaltime',
      projectOrMilepost: '',
      datas: [],
      dateValue: new Date(),
      mySelection: '',
      dataPermissionFlagForRecentlyProject: 'org',
      isQueryOnCreated: false,
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 5, // 每页记录数
        pageSizes: ['5'],
        totalCount: 0 // 总数
      }
    }
  },
  methods: {
    tabclik(tab) {
      this.timeColName = tab.name
      this.loadData()
    },
    loadData(paramMap) {
      // 得到加载分页
      if (validateNull(paramMap) === false && Object.keys(paramMap).indexOf('currentPage') > -1) {
        this.pageInfo.currentPage = paramMap['currentPage']
      }
      var params = this.getQueryParams()
      params = Object.assign(
        params,
        paramMap,
        {
          dataPermissionFlag: this.dataPermissionFlagForRecentlyProject
        },
        { timeColName: this.timeColName }
      )
      this.loading = true
      getAction('pm/project/reccentlyProject', params).then(res => {
        if (res.success) {
          this.datas = res.result.dataList
          this.pageInfo.totalCount = res.result.totalCount
        } else {
          this.$tap.alert(res.message, 'warning')
        }
        this.afterLoadData()
        this.loading = false
      })
      //   getManHoursDataList(){
      //       getAction('/pm/')
      //   }
    }
  },
  created() {}
}
</script>

<style scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.el-pagination__total {
  margin: 0px;
}
.pagebar {
  font-size: 14px;
}
.child {
  background: #000;
  width: 10%;
  height: 10%;
}
</style>
